<template>
    <el-form ref="form" :model="item.tpl" v-if="item.tpl" label-width="100px" size="mini">
        <el-form-item label="图片对齐">
            <el-radio-group v-model="item.tpl.image.align" size="mini">
                <el-radio-button label="left">左</el-radio-button>
                <el-radio-button label="center">中</el-radio-button>
                <el-radio-button label="right">右</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="图片宽度">
            <el-radio-group v-model="item.tpl.image.widthMode" size="mini">
                <el-radio-button label="auto">自动</el-radio-button>
                <el-radio-button label="full">全屏</el-radio-button>
                <el-radio-button label="fixed">定宽</el-radio-button>
            </el-radio-group>
            <el-input v-show="item.tpl.image.widthMode == 'fixed'"
                      v-model="item.tpl.image.width" size="mini"
                      style="width:80px;margin-top: -8px;margin-left: 10px;">
                <template slot="append">px</template>
            </el-input>
        </el-form-item>
        <el-form-item label="图片高度">
            <el-radio-group v-model="item.tpl.image.heightMode" size="mini">
                <el-radio-button label="auto">自动</el-radio-button>
                <el-radio-button label="fixed">定高</el-radio-button>
            </el-radio-group>
            <el-input v-show="item.tpl.image.heightMode == 'fixed'"
                      v-model="item.tpl.image.height" size="mini"
                      style="width:80px;margin-top: -8px;margin-left: 10px;">
                <template slot="append">px</template>
            </el-input>
        </el-form-item>
        <el-form-item label="显示文本">
            <el-radio-group v-model="item.tpl.txt.show">
                <el-radio :label="true">显示</el-radio>
                <el-radio :label="false">隐藏</el-radio>
            </el-radio-group>
        </el-form-item>
        <template v-if="item.tpl.txt.show">
            <el-form-item label="文本模式">
                <el-radio-group v-model="item.tpl.txt.themeMode">
                    <el-radio label="normal">普通</el-radio>
                    <el-radio label="air">悬浮</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="垂直对齐">
                <el-radio-group v-model="item.tpl.txt.align" size="mini">
                    <el-radio-button label="top">上</el-radio-button>
                    <el-radio-button label="middle">中</el-radio-button>
                    <el-radio-button label="bottom">下</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <c-txt :txt="item.tpl.txt.name" label="名称" :hidden-content="true"></c-txt>
            <c-txt :txt="item.tpl.txt.desc" label="描述" :hidden-content="true"></c-txt>
            <c-bg :bg="item.tpl.txt.bg"></c-bg>
            <c-margin label="内边距" :margin="item.tpl.txt.padding"></c-margin>
            <c-margin label="外边距" :margin="item.tpl.txt.margin"></c-margin>
        </template>
    </el-form>
</template>

<script type="text/javascript">

    import { mapState, mapActions } from 'vuex';
    import cBg from '../common-ele/bg';
    import cBorder from '../common-ele/border';
    import cIcon from '../common-ele/icon';
    import cTxt from '../common-ele/txt';
    import cMargin from '../common-ele/margin';

    export default {
        props: [ 'item'],
        data () {
            return {}
        },
        mounted: function () {},
        components: {
            cBg,
            cBorder,
            cIcon,
            cTxt,
            cMargin
        },
        watch: {},
        computed: mapState([

        ]),
        methods: {
            ...mapActions([
            ])
        }
    }
</script>
